<template>
  <div class="conten lineUp">
    <Block class="content-table">
      <div class="action-box">
        <div class="left"></div>
        <div class="right">
          <el-button v-if="!isField" @click="active('lineUpAdd', '热门设置新增')">新增</el-button>
        </div>
      </div>
    </Block>
    <BiTable ref="table" :loading="loading" row-key="id" :data="tableData" size="medium" :column="tableColums" fixed="sticky" fixed-offset="50" layout="total, prev, pager, next" :auto-scroll="false">
      <template v-slot:playlet_cover="{ row }">
        <div class="images">
          <SvgIcon icon-class="drag2" class="drag" style="font-size: 14px; margin: -1px 3px 0 0; width: 20px"></SvgIcon>
          <el-image :src="row.playlet_cover" style="width: 50px; border-radius: 5px"></el-image>
        </div>
      </template>
      <template v-slot:tags="{ row }">
        <p v-for="(item,index) in row.tags" :key="index">{{ item.tag_title }}</p>
      </template>
      <template v-slot:operate="{ row }">
        <div>
          <el-button type="text" size="medium" @click="active('HotAdd', '热门设置编辑', row)">编辑</el-button>
          <el-popconfirm
            icon="el-icon-info"
            icon-color="red"
            style="margin-left:10px;"
            title="确定删除吗？"
            @confirm="delRow(row)"
          >
            <el-button
              slot="reference"
              type="text"
              size="medium"
            >删除</el-button>
          </el-popconfirm>
        </div>
      </template>

      <template v-slot:status="{ row }">
        <div>
          <el-switch v-model="row.status" active-value="1" inactive-value="0" @change="onStatusChange(row.id, row.status)"> </el-switch>
        </div>
      </template>
    </BiTable>

    <BiDrawer v-model="drawer.visible" append-to-body :drawer-title="drawer.title" :component="drawerComponent.HotAdd" :data="drawer.row" drawer-size="500" @ok="onSubmit" @close="close"></BiDrawer>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import Sortable from 'sortablejs'
import SvgIcon from '@/components/SvgIcon/index.vue'
import HotAdd from './component/HotAdd.vue'
import { mapMutations } from 'vuex'
import { POST_mini_app_playlet_popularIndex, POST_mini_app_playlet_popularSort, DELET_mini_app_playlet_popularDel, POST_mini_app_playlet_popularStatus } from '@/api/appContent/theater'
export default {
  components: {
    draggable,
    SvgIcon
  },
  props: ['isField', 'resizeData'],
  data() {
    return {
      loading: false,
      tableData: [],
      tableColums: [
        {
          label: '图片',
          prop: 'playlet_cover',
          slotScope: true
        },
        {
          label: '状态',
          prop: 'status',
          slotScope: true
        },
        {
          label: '标签',
          prop: 'tags',
          slotScope: true
        },
        {
          label: '跳转内容',
          prop: 'playlet_title'
        },
        {
          label: '创建人',
          prop: 'creator'
        },
        {
          label: '创建时间',
          prop: 'create_time',
          width: 160
        },
        {
          label: '操作',
          prop: 'operate',
          slotScope: true
        }
      ],
      page_info: {
        total: 0,
        page: 1,
        page_size: 20
      },
      mini_app_id: window.localStorage.getItem('mini_app_id'),
      drawer: {
        title: '',
        visible: false,
        row: {}
      },
      drawerComponent: {
        HotAdd: HotAdd
      }
    }
  },
  watch: {
    resizeData(newVal, oldVal) {
      if (newVal) {
        this.onRankIndexList()
      }
    }
  },
  mounted() {
    this.onRankIndexList()
    this.$nextTick(() => {
      this.setSort()
    })
  },
  methods: {
    ...mapMutations('content', ['set_resizeAPPList']),
    handlePageChange() {},
    close() {
      this.drawer = {
        title: '',
        visible: false,
        row: {}
      }
    },
    async onRankIndexList() {
      const res = await POST_mini_app_playlet_popularIndex({ mini_app_id: this.mini_app_id })
      if (res.status_code == 1) {
        this.$set(this, 'tableData', res.data.data)
      }
    },
    setSort() {
	  // ref一定跟table上面的ref一致
      const el = this.$refs.table.$el.querySelectorAll(
        '.el-table__body-wrapper > table > tbody'
      )[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        // 监听拖拽事件结束时触发
        onEnd: evt => {
          // 拖动行的前一行
          const targetRow = this.tableData.splice(evt.oldIndex, 1)[0]
          // 拖动行的后一行
          this.tableData.splice(evt.newIndex, 0, targetRow)
          const arr = []
          this.tableData.forEach((item, index) => {
            arr.push({
              id: item.id,
              sort: index
            })
          })
          this.onrankSort(arr)
          // 这里的tableData是你table上面绑定的list
        }
      })
    },
    async onrankSort(arr) {
      const res = await POST_mini_app_playlet_popularSort({ list: arr })
      if (res.status_code == 1) {
        this.$message.success(res.msg)
        this.onRankIndexList()
      }
    },
    delRow(row) {
      DELET_mini_app_playlet_popularDel({ id: row.id }).then((res) => {
        console.log(res)
        if (res.status_code == 1) {
          this.$message.success(res.msg)
          this.onRankIndexList()
          this.set_resizeAPPList()
        }
      })
    },
    async onStatusChange(id, status) {
      const res = await POST_mini_app_playlet_popularStatus({
        id,
        status: status
      })
      if (res.status_code == 1) {
        this.$message.success(res.msg)
        // this.onRankIndexList()
        this.set_resizeAPPList()
      }
    },
    active(type, title, data = {}) {
      this.drawer.title = title
      this.drawer.visible = true
      this.drawer.row = data
    },
    onSubmit() {
      this.onRankIndexList()
      this.set_resizeAPPList()
    }
  }
}
</script>

<style lang="scss" scoped>
.conten {
  padding: 20px;
  padding-top: 0;
}
 .action-box{
  margin-bottom: 0 !important;
  height: 32px;
}
.content-outer .content-table{
  margin-top: 0 !important;
}
.images {
  display: flex;
  align-items: center;
  .drag {
    cursor: pointer;
  }
}
</style>